<template>
  <div class="cp">
    <div style="padding: 8px 0 24px 0">
      <a-button type="primary" @click="onAdd">
        <template #icon>
          <PlusOutlined />
        </template>
        新增日志
      </a-button>
    </div>

    <template v-for="(item, index) in state.pager.list" :key="item.id">
      <a-divider v-if="index > 0" />

      <a-row :gutter="[24, 12]">
        <a-col :span="3" class="f-label"> 美容师</a-col>
        <a-col :span="15" class="f-value">
          {{ item.employeeName || item.memberCode || item.createBy }}
        </a-col>
        <a-col :span="6" class="d-regular f-value" style="text-align: right">
          {{ item.createTime }}
        </a-col>

        <a-col :span="3" class="f-label"> 服务记录</a-col>
        <a-col :span="21" class="f-value">
          {{ item.content }}
        </a-col>

        <a-col :span="3" class="f-label"> 服务照片</a-col>

        <a-col :span="21" v-if="!item.attachmentsBeanList?.length" class="f-label"> -</a-col>
        <a-col :span="21" v-else>
          <a-flex gap="small">
            <a-image
              :width="76"
              :height="76"
              v-for="file in item.attachmentsBeanList"
              :key="file.attachmentsId"
              :src="OSS_IMG_URL(file.picUrl)"
              :fallback="imgErrSrc"
            />
          </a-flex>
        </a-col>
      </a-row>
    </template>

    <div class="pagination">
      <a-pagination
        :default-page-size="state.pageSize"
        size="small"
        v-model:current="state.pager.currentPage"
        :total="state.pager.totalCount"
        show-size-changer
        hideOnSinglePage
        @showSizeChange="onShowSizeChange"
      />
    </div>

    <Detail
      @register="registerDetail"
      @complete="
        state.pager.currentPage = 0;
        doPager();
      "
    />
  </div>
</template>

<script setup>
  import { defineOptions, reactive, watch } from 'vue';

  import { PAGE } from '@/api/http';
  import { useDrawer } from '@/components/Drawer';
  import { PlusOutlined } from '@ant-design/icons-vue';

  import Detail from './note-detail.vue';
  import { imgErrSrc, OSS_IMG_URL } from '@/api/ds.js';

  const [registerDetail, { openDrawer: detailDrawer }] = useDrawer();

  defineOptions({ name: 'MemberNoteLog' });

  const props = defineProps({
    memberCode: {
      type: String,
    },
  });

  const state = reactive({
    search: {},
    version: 0,
    pageSize: 10,
    pager: {
      currentPage: 0,
    },
  });

  watch(
    () => `${state.pager.currentPage || 0}-${state.version || ''}`,
    () => doPager(),
    { immediate: true },
  );

  function onAdd() {
    const { memberCode } = props;
    detailDrawer(true, { memberCode });
  }

  function doPager() {
    const { memberCode } = props;
    const { pager, pageSize } = state,
      { currentPage } = pager;

    const url = '/membership/getMemberNotesBeanPages';
    PAGE(url)({ memberCode, currentPage, pageSize }).then((result) => {
      state.pager = result ?? {};
    });
  }

  function onShowSizeChange(current, size) {
    state.pageSize = size;
    doPager();
  }
</script>
<style lang="less" scoped>
  .cp {
    padding: 12px 24px;

    .pagination {
      text-align: right;
    }
  }
</style>
